<template>
  <el-row style="width: 1000px; margin: auto">
    <!-- 头部筛选条件  使用的是可控组件-->
    <el-col :span="24">
      <el-form ref="form" :model="form" :inline="true" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="省份">
          <el-select v-model="form.provinceCode" placeholder="请选择省份">
            <el-option label="上海" value="shanghai"></el-option>
            <el-option label="北京" value="beijing"></el-option>
            <el-option label="四川" value="sichuan"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="onReset">重置</el-button>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 表格区域 -->
    <el-col :span="24">
      <div style="text-align: left">
        <el-button type="primary" :disabled="loading" @click="onAdd"
          >新增</el-button
        >
        <el-button type="danger">批量删除</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        key="id"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column fixed prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="id" label="唯一标识" width="150">
        </el-table-column>
        <el-table-column prop="date" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="provinceName" label="省份" width="120">
        </el-table-column>
        <el-table-column prop="city" label="市区" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template slot-scope="scope">
            <el-button
              @click="handleDetailClick(scope.row)"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>

    <!-- 查看弹窗区域 -->
    <el-dialog
      :title="(detailForm?.name || '') + '的信息'"
      :visible.sync="detailVisible"
      width="1000px"
      :before-close="handleDetailClose"
    >
      <el-form
        :model="detailForm"
        ref="detailForm"
        label-width="80px"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="detailForm.name"
                style="width: 200px"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" offset="8">
            <el-form-item label="日期" prop="date">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                style="width: 200px"
                disabled
                v-model="detailForm.date"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="省份" prop="provinceCode">
              <el-select
                style="width: 200px"
                :disabled="true"
                placeholder="请选择省份"
                v-model="detailForm.provinceCode"
              >
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
                <el-option label="四川" value="sichuan"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市区" prop="city">
              <el-input
                v-model="detailForm.city"
                style="width: 200px"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址" prop="address">
              <el-input
                v-model="detailForm.address"
                style="width: 200px"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDetailClose">取 消</el-button>
        <el-button type="primary" @click="handleDetailOk">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹窗区域 -->
  </el-row>
</template>

<script>
// 模拟数据库的数据
const allData = [
  {
    date: "2016-05-02",
    name: "王小虎",
    provinceName: "上海",
    provinceCode: "shanghai",
    city: "普陀区",
    address: "上海市普陀区金沙江路1518号",
    zip: 567122,
    id: "9x9x9x9",
  },
  {
    date: "2016-05-04",
    name: "李大成",
    provinceName: "北京",
    provinceCode: "beijing",
    city: "朝阳区",
    address: "北京朝阳区海平路1778号",
    zip: 22113,
    id: "8x8x8x8",
  },
  {
    date: "2016-05-01",
    name: "钟小妹",
    provinceName: "四川",
    provinceCode: "sichuan",
    city: "金牛区",
    address: "四川成都市金牛区54号",
    zip: 412123,
    id: "6v6v6v",
  },
  {
    date: "2016-05-03",
    name: "牛儿",
    provinceName: "北京",
    provinceCode: "beijing",
    city: "海淀区",
    address: "北京海淀区18号",
    zip: 563543,
    id: "3k3k3k",
  },
];
const fetchData = async (searchInfo) => {
  return await new Promise((resolve) => {
    setTimeout(() => {
      resolve(
        allData
          .filter((item) => {
            return item.name.includes(searchInfo.name);
          })
          .filter((item) => {
            return item.provinceCode.includes(searchInfo.provinceCode);
          })
      );
    }, 600);
  });
};

export default {
  name: "About",
  data() {
    return {
      loading: false,
      tableData: [],
      // 查询表单
      form: {
        name: "",
        provinceCode: "",
      },
      // 详情表单
      // 当前操作的数据
      detailForm: {
        date: "",
        name: "",
        provinceName: "",
        provinceCode: "",
        city: "",
        address: "",
        zip: 0,
        id: "",
      },
      detailVisible: false,
    };
  },
  methods: {
    // 初始化加载数据
    async initData() {
      this.loading = true;
      const resData = await fetchData(this.form).finally(() => {
        this.loading = false;
      });
      this.tableData = resData;
    },
    // 查看详情
    handleDetailClick(row) {
      // Object.assign(this.detailForm, row);
      this.detailForm = {
        ...row,
      };
      this.detailVisible = true;
    },
    // 关闭查看详情
    handleDetailClose() {
      this.current = null;
      this.detailVisible = false;
    },
    // 确定查看详情
    handleDetailOk() {
      this.current = null;
      this.detailVisible = false;
    },
    // 筛查查询
    onSearch() {
      this.initData();
    },
    // 重置查询
    onReset() {
      this.form.name = "";
      this.form.provinceCode = "";
      this.initData();
    },
    // 新增一条数据
    onAdd() {
      const id =
        String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
      allData.push({
        date: new Date().toLocaleString(),
        name: "牛儿",
        provinceName: "北京",
        provinceCode: "beijing",
        city: "海淀区",
        address: "北京海淀区18号",
        zip: 12003,
        id,
      });
      this.initData();
    },
  },
  mounted() {
    this.initData();
  },
};
</script>
